<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { Search, Refresh } from "@element-plus/icons-vue"
import { formatDateTime } from "@/utils"
import { usePagination } from "@/hooks/usePagination"
import { getPushListApi } from "@/api/pushRecord"
import { type FormInstance } from "element-plus"
import { useUserStore } from "@/store/modules/user"
const useInfo = useUserStore()

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
// #region
defineOptions({
  name: "PushRecordList"
})

const loading = ref<boolean>(false)

// 所有账号
import { getUserDataApi } from "@/api/user"
const UserList = ref<any>([])
const getUserListFn = () => {
  getUserDataApi({
    page: 1,
    size: 10000,
    name: undefined,
    department: "",
    team: "",
    role: ""
    // phone: searchData.phone || undefined
  }).then((res: any) => {
    UserList.value = res.data.userList
    console.log(res.data.userList, 111111)
  })
}
getUserListFn()

const formatterCombo = (row: any, column: any, celValue: any) => {
  UserList.value.filter((item: any) => {
    if (item.id == row.submit_human) {
      celValue = item.name
      // console.log(item, 22222222222)
    }
  })
  return celValue
}

// #region 查
const tableData = ref<any>([])
const searchFormRef = ref<FormInstance | null>(null)
const uid = ref<any>()
const searchData = reactive<any>({
  submit_human: ""
})

const getTableData = async () => {
  if (useInfo.userInfo.user.id == 1) {
    uid.value = searchData.submit_human
  } else {
    uid.value = useInfo.userInfo.user.id
  }
  await getPushListApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    submit_human: uid.value
  }).then((res: any) => {
    console.log(res)
    if (res.code == 200) {
      tableData.value = res.data.submitList
    }
    paginationData.total = res.data.total
  })
}
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    getTableData()
  }
  paginationData.currentPage = 1
}

const formatter = (row: any) => {
  // console.log(JSON.parse(row).join(","))
  return JSON.parse(row).join("<br/>")
}
// #endregion
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>
<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper" v-if="useInfo.userInfo.user.id == 1">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="submit_human" label="提单员">
          <el-input v-model.trim="searchData.submit_human" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="table-wrapper">
        <el-table :data="tableData">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="submit_id" label="ID" align="center" width="80" />
          <el-table-column prop="submit_create_time" label="提交时间" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.submit_create_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="submit_order" label="订单编号" align="center">
            <template #default="scope"> <p v-html="formatter(scope.row.submit_order)" /> </template>
          </el-table-column>
          <el-table-column prop="submit_state" label="提交状态" align="center">
            <template #default="scope">
              <span v-if="scope.row.submit_state == 0">处理中</span>
              <span v-if="scope.row.submit_state == 1">成功</span>
              <span v-if="scope.row.submit_state == 2">失败</span>
            </template>
          </el-table-column>
          <el-table-column prop="submit_human" label="提单员" align="center" :formatter="formatterCombo" />
          <el-table-column prop="note" label="备注" align="center" />
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  .btn {
    width: 100%;
    height: 100%;
    display: flex;
  }
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-upload-list__item .el-icon--close-tip) {
  top: 20px;
  left: 10px;
  right: 0;
}
.doing {
  color: #b88230;
}
.error {
  color: red;
}
.success {
  color: #67c23a;
}
.again {
  color: #c45656;
}
:deep(.el-popper) {
  max-width: 50% !important;
}
.date-box {
  width: 340px !important;
}
.text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
.pbox {
  line-height: 2em;
}
.flag {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.red {
  background: red;
}
.yellow {
  background: rgb(255, 220, 0);
}
.green {
  background: green;
}
.blue {
  background: blue;
}
.purple {
  background: purple;
}
.goodInfo {
  text-align: left;
}
.esp {
  width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
